<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--潘天赐-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>

<form id="myForm">
<h4 style="color: #8c8c8c">第一步 &nbsp;&nbsp;&nbsp;材料单名称：<label id="cname">[[${session.updateMyMaterialsName}]]</label></h4>
<input id="name1" name="productName" class="form-control">
<input type="hidden" name="commonQueryId" th:value="${session.updateMyMaterialsId}" class="form-control">
<br>
<h4 style="color: #8c8c8c">第二步 &nbsp;&nbsp;&nbsp;请填写材料单的各部件详细配置：</h4>
<table id="myTable"></table>

   <button type="button" onclick="updateMaterials()" class="btn btn-info" style="width:200px;">保存</button>
</form>
</body>
<script>
    //var id = [[${session.id}]]
    var name1 = $("#cname").text()
    $("#name1").val(name1)
    //$("#id").val(id)

    $("#myTable").bootstrapTable({
        url:"queryMyMaterialsTo",
        columns:[
            {field:'materialsType',title:'类目',
                formatter: function(value,row,index){
                    return '<input type="hidden" name="materialsInventoryId" id="materialsInventoryId" value="'+row.materialsInventoryId+'" class="form-control" style="width:50px;">'+value
                }
            },
            {field:'materialsName',title:'材料名称'},
            {field:'materialsId',title:'材料编码'},
            {field:'materialsCount',title:'材料数量',width:120,
                formatter: function(value,row,index){
                    return '<input type="text" name="materialsCount" id="materialsCount" value="'+row.materialsCount+'" onkeyup="yz_count()" placeholder="请输入正整数" class="form-control">'+
                        '<span style="color: #ff0000" id="span_count"></span>'
                }
            },
        ],
        pagination:true,			//是否展示分页
        pageNumber:1,				//当前页
        pageList:[1,3,5],			//分页组件
        sidePagination : 'client',	//分页方式：client客户端分页，server服务端分页
    })

    function updateMaterials(){
        $.ajax({
            url:"updateMaterials",
            data:$("#myForm").serialize(),//获取表单的值
            success:function(){
                alert("成功")
                $("#myTable").bootstrapTable('refresh');//表格刷新
            }
        });
    }

    //验证数量是否为正整数
    function yz_count(){
        var materialsCount = $("#materialsCount").val()
        var span = $("#span_count")
        var reg = /^[1-9]\d*$/
        if (reg.test(materialsCount)){
            span.text("")
            return true
        }else{
            span.text("*请输入正整数")
            return false
        }
    }


</script>
</html>